<!--
 * @Description: 
 * @Date: 2022-07-18 17:38:09
 * @LastEditTime: 2022-07-20 11:40:35
 * @FilePath: \jsnode\css\bfc.html
-->
<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            width: 100%;
            height: 400px;
            background-color: gray;
        }

        header {
            background-color: aquamarine;
            text-align: center;
            height: 50px;
            line-height: 50px;
        }

        footer {
            background-color: cadetblue;
            text-align: center;
            height: 50px;
            line-height: 50px;
        }

        .center {
            width: 100px;
            height: 50px;
            background-color:aquamarine;
            text-align: center;
            /* float: left; */
            clear: both;
        }

        .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: brown;
        }

        .right {
            float: left;
            width: 100px;
            height: 100px;
            background-color: burlywood;
        }

        .content{
            width:300px;
            background-color:chocolate;
            border: 1px red solid;
            overflow: hidden;
        }
        .before{
            width: 100px;
            height: 100px;
            background-color: darkmagenta;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="before">我是浮动之前的</div>
        <div class="left">我来组成左边</div>
        <div class="center">我来组成中间</div>
        <div class="right">我来组成右边</div>
        <!-- <div class="before">我是浮动之后的</div>
        <div class="center">我来组成右边2</div>
        <div class="right">我来组成右边3</div>
        <div class="left">我来组成右边4</div> -->
    </div>

</body>

</html>